<template>
  <div>
    <el-drawer
      :size="size"
      :title="title"
      :visible.sync="dialog"
      :close-on-press-escape="false"
      :close="close"
      :before-close="close"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content">
        <slot name="content"></slot>

      </div>
      <div class="demo-drawer__footer" v-if="!disabled">
        <el-button
          size="small"
          @click="close()"
        >取 消</el-button>
        <el-button
          type="primary"
          :loading="loading"
          @click="handleSave()"
          size="small"
        >{{ loading ? '提交中 ...' : '确 定' }}</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  props: {
    dialog: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    disabled: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    size: {
      type: String,
      default: function () {
        return "560px";
      },
    },
    title: {
      type: String,
      default: function () {
        return "";
      },
    },
    loading: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    //关闭弹框
    close() {
      this.$emit("close");
    },
    //关闭loading
    closeLoading() {
      this.$emit("loading");
    },
    //提交保存
    handleSave() {
      this.$emit("handleSave");
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-drawer__header {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dcdfe6;
  margin-bottom: 10px;
  font-weight: bold;
}
::v-deep .el-drawer__body {
  height: calc(100vh - 46px);
  overflow: auto;
}
::v-deep .demo-drawer__content {
  height: calc(100vh - 100px);
  padding-bottom: 10px;
  box-sizing: border-box;
  overflow: auto;
  padding: 0 12px;
}
::v-deep .demo-drawer__footer {
  padding: 0 12px;
  box-sizing: border-box;
  height: 40px;
  border-top: 1px solid #dcdfe6;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>